<template>
	<view class="content">
		<view class="add-item" @click="chooseImage">
			<view class="add-item-img">
				<image class="image"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/shoukuan.png"
					mode="aspectFill"></image>
			</view>
			<view class="add-item-title">
				去上传微信/支付宝收款码
			</view>

			<view class="iconfont icon-gengduo more"></view>
		</view>
		<view class="add-item" @click="navigate('/page_other/monetization/add-bank-card')">
			<view class="add-item-img">
				<image class="image"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/add_card.png"
					mode="aspectFill"></image>
			</view>
			<view class="add-item-title">
				去添加银行卡
			</view>

			<view class="iconfont icon-gengduo more"></view>
		</view>
		<template v-if="list.length>0">
			<view class="gift-item" v-for="item in list" :key="item.id" @click="selectBank(item)">
				<view class="top">
					<view class="left-title">

						{{item.bankName}}

					</view>
					<view class="right-gift" style="color:#FF2F34" @click.stop="del(item.id)">
						删除
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						持卡人姓名：
					</view>
					<view class="order-right">
						{{item.bankUserName}}
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						卡号:
					</view>
					<view class="order-right">
						{{item.bankNum}}
					</view>
				</view>

			</view>
		</template>

		<view v-if="more==false&&list.length==0" style="width:100%;text-align: center;">暂无数据</view>
		<view v-else-if="more==false&&list.length>0" style="width:100%;text-align: center;">没有更多了</view>

	</view>
</template>

<script>
	import {
		getUserBankList,
		del
	} from '@/api/bank.js'
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		isMore
	} from '@/util/util.js'
	export default {
		data() {
			return {
				conf: {
					page: 1,
					limit: 10,
				},
				more: true,
				list: [],
				voucher: '',
			}
		},
		methods: {
			del(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗?',
					cancelText: '取消',
					confirmText: '删除',
					success(res) {
						if (res.confirm) {
							del({
								id: id
							}).then(res => {
								uni.showToast('删除成功')
								that.getList(true);
							})
						}
					}
				})
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getList(true)
			},
			selectBank(item) {
				item.type=2
				uni.navigateTo({
					url: '/page_other/monetization/index?info=' + JSON.stringify(item)
				})
			},
			chooseImage(e) {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {

						let imgUrl = res.tempFiles[0].path;
						console.log(imgUrl)
						uploadFile(imgUrl).then(res => {
							let obj = res
							obj.type = 1;

							uni.navigateTo({
								url: '/page_other/monetization/index?info=' + JSON.stringify(
									obj)
							})
						})

					}
				});
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserBankList({
					page: this.conf.page,
					limit: this.conf.limit,
				}).then(res => {
					this.voucher = res.voucher
					let list = res.records || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
				})
			}
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getList();
			}
		},
		onLoad() {
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 20rpx 30rpx 0;

		.info-block {
			background: #ffffff;
			padding: 30rpx;
			margin-bottom: 20rpx;


		}

		.gift {
			width: 100%;
			height: 300rpx;
			background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/mine.png');
			background-size: 100%;
			padding: 40rpx 40rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.gift-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					color: #FFFFFF;
					font-size: 32rpx;
				}

				.top-right {
					width: 30rpx;
					height: 30rpx;
				}

			}

			.gift-bottom {
				margin-top: 20rpx;
				font-size: 64rpx;
				color: #FFFFFF;
			}
		}

		.small-title {
			font-family: FZHanZhenGuangBiaoS-GB;
			font-size: 18px;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;
			color: #FF2F34;
			margin: 30rpx 0 20rpx 0;
		}

		.gift-item {
			background: #FFFFFF;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 22px;
					letter-spacing: 0px;
					color: #1A1A1A;
				}
			}

			.order {
				display: flex;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				color: #767676;
				margin-top: 20rpx;
			}
		}

		.add-item {

			background: #FFFFFF;

			margin-bottom: 20rpx;
			height: 140rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: start;

			.add-item-img {
				width: 100rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.image {
					width: 80rpx;
					height: 60rpx;
					margin: auto 0;
				}
			}

			.add-item-title {

				font-size: 36rpx;
				height: 140rpx;
				width: 500rpx;
				line-height: 140rpx;
			}

			.more {
				margin: auto 0;
				margin-right: 20rpx;

			}
		}

	}
</style>